<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
  window.addEventListener("load", () => {

    const audio = document.createElement("audio");

    audio.controls = "controls";

    document.body.appendChild(audio);

    audio.addEventListener("canplay", e => {
      audio.play();
    });

    const words = ["hello", "world"];

    const mediaSource = new MediaSource();

    const mimeCodec = "audio/mpeg";

    const mediaType = ".mp3";

    const url = "https://ssl.gstatic.com/dictionary/static/sounds/de/0/";

    Promise.all(
      words.map(word =>
        fetch(`https://query.yahooapis.com/v1/public/yql?q=select * from data.uri where url="${url}${word}${mediaType}"&format=json&callback=`)
          .then(response => response.json())
          .then(({
                   query: {
                     results: {
                       url
                     }
                   }
                 }) =>
            fetch(url).then(response => response.body.getReader())
              .then(readers => readers)
          )
      )
    )
      .then(readers => {

        audio.src = URL.createObjectURL(mediaSource);
        mediaSource.addEventListener("sourceopen", sourceOpen);

        async function sourceOpen() {
          var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
          // set `sourceBuffer` `.mode` to `"sequence"`
          sourceBuffer.mode = "segments";

          const processStream = ({
                                   done,
                                   value
                                 }) => {
            if (done) {
              return;
            }
            // append chunk of stream to `sourceBuffer`
            sourceBuffer.appendBuffer(value);
          }
          // at `sourceBuffer` `updateend` call `reader.read()`,
          // to read next chunk of stream, append chunk to
          // `sourceBuffer`
          for (let [index, reader] of Object.entries(readers)) {
            sourceBuffer.addEventListener("updateend", function() {
              reader.read().then(processStream);
            });

            let stream = await reader.read().then(processStream)
              .then(() => reader.closed)
              .then(() => "done reading stream " + index);

            console.log(stream);
          }

        }
      })
  })
</script>
</body>
</html>
